<template>
  <div>
    <!-- 顶部 -->
    <el-card>
      <el-row>
        <el-col :span="7" class="top_input">
          <label>申请单号：</label>
          <el-input
            v-model="searchModel.applicationNumber"
            clearable
            placeholder="请输入单号"
          >
          </el-input>
        </el-col>
        <el-col :span="4" class="top_input">
          <label>申请状态：</label>
          <div></div>
          <el-select v-model="searchModel.status" placeholder="状态" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <div style="margin-left: 5px">
        <el-button type="primary" plain size="small" @click="init()"
          >搜索</el-button
        >
      </div>
    </el-card>
    <el-card>
      <el-table :data="applicationsList" style="width: 100%">
        <el-table-column prop="applicationNumber" label="申请单号" width="200">
        </el-table-column>
        <el-table-column prop="departureLocation" label="出发地点" width="140">
        </el-table-column>
        <el-table-column prop="destination" label="目的地" width="140">
        </el-table-column>

        <el-table-column prop="needDriver" label="是否需要司机" width="140">
          <template slot-scope="scope">
            <el-tag effect="dark" v-if="scope.row.needDriver">是</el-tag>
            <el-tag effect="dark" type="warning" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="passengers" label="乘车人数" width="140">
        </el-table-column>
        <el-table-column prop="startTime" label="计划开始时间" width="180">
        </el-table-column>
        <el-table-column prop="endTime" label="计划结束时间" width="180">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="140">
          <template slot-scope="scope">
            <!-- 申请状态：pending-审批中，approved-已批准，rejected-已拒绝，dispatched-已派车，in_progress-进行中，completed-已完成，cancelled-已取消 -->
            <el-tag effect="dark" v-if="scope.row.status == 'pending'"
              >审批中</el-tag
            >
            <el-tag
              effect="dark"
              v-if="scope.row.status == 'approved'"
              type="success"
              >已批准</el-tag
            >
            <el-tag
              effect="dark"
              v-if="scope.row.status == 'rejected'"
              type="danger"
              >已拒绝</el-tag
            >
            <el-tag
              effect="dark"
              v-if="scope.row.status == 'dispatched'"
              type="success"
              >已派车</el-tag
            >
            <el-tag
              effect="dark"
              v-if="scope.row.status == 'in_progress'"
              type="success"
              >进行中</el-tag
            >
            <el-tag
              effect="dark"
              v-if="scope.row.status == 'completed'"
              type="success"
              >已完成</el-tag
            >
            <el-tag
              effect="dark"
              v-if="scope.row.status == 'cancelled'"
              type="warning"
              >已取消</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column prop="purpose" label="用车事由"> </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button type="text" @click="openDrawer(scope.row.id)"
              >审批</el-button
            >
            <el-button
              type="text"
              style="color: red"
              @click="delById(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-size="searchModel.pageSize"
      layout="total,  prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 审批抽屉 -->
    <el-drawer
      title="审批"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
      size="50%"
    >
      <el-card>
        <strong style="font-size: 16px"
          >单号：{{ applicationForm.applications.applicationNumber }}</strong
        >
        <el-row class="row">
          <el-col :span="12">
            <label>出发地点：</label
            ><span>{{ applicationForm.applications.departureLocation }}</span>
          </el-col>
          <el-col :span="12">
            <label>目的地点：</label>
            <span>{{ applicationForm.applications.destination }}</span>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <label>开始时间：</label
            ><span>{{ applicationForm.applications.startTime }}</span>
          </el-col>
          <el-col :span="12">
            <label>结束时间：</label
            ><span>{{ applicationForm.applications.endTime }}</span></el-col
          >
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <label> 人数：</label
            ><span>{{ applicationForm.applications.passengers }} </span>
          </el-col>
          <el-col :span="12"
            ><label>事由：</label>
            <span>{{ applicationForm.applications.purpose }}</span></el-col
          >
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <label>申请用户名：</label>
            <span>{{ applicationForm.applicant.username }}</span>
          </el-col>
          <el-col :span="12"
            ><label> 创建时间：</label
            ><span>{{ applicationForm.applications.createdAt }}</span></el-col
          >
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <label></label>
          </el-col>
          <el-col :span="12"><label></label></el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <label>是否需要司机：</label>
            <el-tag effect="dark" v-if="applicationForm.applications.needDriver"
              >是</el-tag
            >
            <el-tag effect="dark" type="warning" v-else>否</el-tag>
          </el-col>
          <el-col :span="12"
            ><label>当前状态：</label>
            <el-tag
              effect="dark"
              v-if="applicationForm.applications.status == 'pending'"
              >审批中</el-tag
            >
            <el-tag
              effect="dark"
              v-if="applicationForm.applications.status == 'approved'"
              type="success"
              >已批准</el-tag
            >
            <el-tag
              effect="dark"
              v-if="applicationForm.applications.status == 'rejected'"
              type="danger"
              >已拒绝</el-tag
            >
            <el-tag
              effect="dark"
              v-if="applicationForm.applications.status == 'dispatched'"
              type="success"
              >已派车</el-tag
            >
            <el-tag
              effect="dark"
              v-if="applicationForm.applications.status == 'in_progress'"
              type="success"
              >进行中</el-tag
            >
            <el-tag
              effect="dark"
              v-if="applicationForm.applications.status == 'completed'"
              type="success"
              >已完成</el-tag
            >
            <el-tag
              effect="dark"
              v-if="applicationForm.applications.status == 'cancelled'"
              type="warning"
              >已取消</el-tag
            >
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        审核记录
        <div
          v-for="approvals in applicationForm.approvals"
          :key="applicationForm.approvals.id"
        >
          <!-- 审批用户 -->
          <el-row class="row">
            <el-col :span="6">
              <label>审批用户：</label>
              <span>{{ approvals.approverName }}</span></el-col
            >
            <!-- 审批状态 -->

            <el-col :span="6">
              <label>审批状态：</label>
              <span>
                <!-- approved-通过，rejected-拒绝， -->
                <el-tag effect="dark" v-if="approvals.decision == 'approved'"
                  >通过</el-tag
                >
                <el-tag effect="dark" v-else type="warning">拒绝</el-tag></span
              >
            </el-col>
            <!-- 备注 -->
            <el-col :span="6">
              <label>备注：</label>
              <span>{{ approvals.comments }}</span>
            </el-col>
            <!-- 时间 -->

            <el-col :span="6">
              <label>时间时间：</label>
              <span> {{ approvals.decisionTime }}</span>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card>
        审核

        <el-form
          ref="approvalForm"
          :model="approvalForm"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="审批状态" prop="decision">
            <el-select
              v-model="approvalForm.decision"
              placeholder="请选择审批状态"
            >
              <el-option
                v-for="item in decisionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="approvalForm.comments"
              type="textarea"
              maxlength="30"
              show-word-limit
              placeholder="备注"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="approval()">确定</el-button>
            <el-button @click="close()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-drawer>
  </div>
</template>

<style>
.top_input {
  margin: 4px;
}

.row {
  margin-top: 26px;
}
</style>

<script>
import applicationsApi from "@/api/applications";
export default {
  data() {
    return {
      applicationsList: [],

      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },

      total: 0,

      applicationForm: {
        applicant: {},
        applications: {},
        approvals: {},
      },

      drawer: false,
      //   订单状态 申请状态：pending-审批中，approved-已批准，rejected-已拒绝，dispatched-已派车，in_progress-进行中，completed-已完成，cancelled-已取消
      options: [
        {
          value: "pending",
          label: "审批中",
        },
        {
          value: "approved",
          label: "已批准",
        },
        {
          value: "rejected",
          label: "已拒绝",
        },
        {
          value: "dispatched",
          label: "已派车",
        },
        {
          value: "in_progress",
          label: "进行中",
        },
        {
          value: "completed",
          label: "已完成",
        },
        {
          value: "cancelled",
          label: "已取消",
        },
      ],
      // 审批表
      approvalForm: {},
      // approved-通过，rejected-拒绝，
      decisionOptions: [
        {
          value: "approved",
          label: "通过",
        },
        {
          value: "rejected",
          label: "拒绝",
        },
      ],

      rules: {
        decision: [
          {
            required: true,
            message: "请选择审批状态",
            trigger: "change",
          },
        ],
      },
    };
  },

  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.close();
        })
        .catch((_) => {});
    },

    close() {
      this.applicationForm = { applicant: {}, applications: {}, approvals: {} };
      this.drawer = false;
      this.approvalForm = {};
      this.$refs.approvalForm.resetFields();
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo;
      this.init();
    },
    init() {
      applicationsApi.needApproveList(this.searchModel).then((res) => {
        this.applicationsList = res.data.rows;
        this.total = res.data.total;
      });
    },

    delById(id) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        applicationsApi.deleteApplication(id).then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.init();
        });
      });
    },

    // 打开抽屉
    openDrawer(id) {
      applicationsApi.getApplicationById(id).then((res) => {
        this.applicationForm = res.data;
        this.drawer = true;
      });
    },
    // 提交审批
    approval() {
      //   表单验证
      this.$refs.approvalForm.validate((valid) => {
        if (valid) {
          const data = {
            applications: this.applicationForm.applications,
            approvals: this.approvalForm,
          };

          applicationsApi.reviewApplication(data).then((res) => {
            this.$message({
              type: "success",
              message: res.message,
            });

            this.init();
            this.close();
          });
        } else {
          return false;
        }
      });
    },
  },

  created() {
    this.init();
  },
};
</script>
